<template>
	<view class="masonry">
	  <template v-if="tabIndex === 0">
		<view class="column">
		  <view class="card topic">
			<image
			  mode="widthFix"
			  src="http://static.botue.com/erabbit/static/uploads/topic_1.jpg"
			></image>
			<view class="name">忙里忙外，回家吃饭</view>
			<view class="price">19.9元<text>起</text></view>
			<view class="extra">
			  <text class="icon-heart">1220</text>
			  <text class="icon-preview">1000</text>
			</view>
		  </view>
		  <view class="card brand">
			<view class="locate"> <text class="icon-locate"></text>中国 </view>
			<image
			  mode="widthFix"
			  src="http://static.botue.com/erabbit/static/uploads/brand_logo_6.jpg"
			></image>
			<view class="name">小米优购</view>
			<view class="alt">小米优购闪购嗨购</view>
		  </view>
		  <view class="card goods">
			<image
			  mode="widthFix"
			  src="http://static.botue.com/erabbit/static/uploads/goods_big_6.jpg"
			></image>
			<view class="name"
			  >彩色鹅卵石小清新防水防烫长方形餐桌圆桌布艺茶几垫电视柜盖布
			  鹅软石桌布yg056</view
			>
			<view class="price">¥899</view>
		  </view>
		  <view class="card brand">
			<view class="locate"> <text class="icon-locate"></text>中国 </view>
			<image
			  mode="widthFix"
			  src="http://static.botue.com/erabbit/static/uploads/brand_logo_8.jpg"
			></image>
			<view class="name">小米优购</view>
			<view class="alt">小米优购闪购嗨购</view>
		  </view>
		  <view class="card goods">
			<image
			  mode="widthFix"
			  src="http://static.botue.com/erabbit/static/uploads/goods_big_7.jpg"
			></image>
			<view class="name"
			  >彩色鹅卵石小清新防水防烫长方形餐桌圆桌布艺茶几垫电视柜盖布
			  鹅软石桌布yg056</view
			>
			<view class="price">¥899</view>
		  </view>
		</view>
		<view class="column">
		  <view class="card goods">
			<image
			  mode="widthFix"
			  src="http://static.botue.com/erabbit/static/uploads/goods_big_5.jpg"
			></image>
			<view class="name"
			  >彩色鹅卵石小清新防水防烫长方形餐桌圆桌布艺茶几垫电视柜盖布
			  鹅软石桌布yg056</view
			>
			<view class="price">¥899</view>
		  </view>
		  <view class="card brand">
			<view class="locate"> <text class="icon-locate"></text>中国 </view>
			<image
			  mode="widthFix"
			  src="http://static.botue.com/erabbit/static/uploads/brand_logo_7.jpg"
			></image>
			<view class="name">小米优购</view>
			<view class="alt">小米优购闪购嗨购</view>
		  </view>
		  <view class="card topic">
			<image
			  mode="widthFix"
			  src="http://static.botue.com/erabbit/static/uploads/topic_2.jpg"
			></image>
			<view class="name">忙里忙外，回家吃饭</view>
			<view class="price">19.9元<text>起</text></view>
			<view class="extra">
			  <text class="icon-heart">1220</text>
			  <text class="icon-preview">1000</text>
			</view>
		  </view>
		  <view class="card brand">
			<view class="locate"> <text class="icon-locate"></text>中国 </view>
			<image
			  mode="widthFix"
			  src="http://static.botue.com/erabbit/static/uploads/brand_logo_5.jpg"
			></image>
			<view class="name">小米优购</view>
			<view class="alt">小米优购闪购嗨购</view>
		  </view>
		  <view class="card goods">
			<image
			  mode="widthFix"
			  src="http://static.botue.com/erabbit/static/uploads/goods_big_3.jpg"
			></image>
			<view class="name"
			  >彩色鹅卵石小清新防水防烫长方形餐桌圆桌布艺茶几垫电视柜盖布
			  鹅软石桌布yg056</view
			>
			<view class="price">¥899</view>
		  </view>
		</view>
	  </template>
	  <template v-if="tabIndex === 1">
		<view class="column">
		  <view class="card goods">
			<image
			  mode="widthFix"
			  src="http://static.botue.com/erabbit/static/uploads/goods_big_7.jpg"
			></image>
			<view class="name"
			  >彩色鹅卵石小清新防水防烫长方形餐桌圆桌布艺茶几垫电视柜盖布
			  鹅软石桌布yg056</view
			>
			<view class="price">¥899</view>
		  </view>
		  <view class="card brand">
			<view class="locate"> <text class="icon-locate"></text>中国 </view>
			<image
			  mode="widthFix"
			  src="http://static.botue.com/erabbit/static/uploads/brand_logo_8.jpg"
			></image>
			<view class="name">小米优购</view>
			<view class="alt">小米优购闪购嗨购</view>
		  </view>
		  <view class="card topic">
			<image
			  mode="widthFix"
			  src="http://static.botue.com/erabbit/static/uploads/topic_1.jpg"
			></image>
			<view class="name">忙里忙外，回家吃饭</view>
			<view class="price">19.9元<text>起</text></view>
			<view class="extra">
			  <text class="icon-heart">1220</text>
			  <text class="icon-preview">1000</text>
			</view>
		  </view>
		  <view class="card brand">
			<view class="locate"> <text class="icon-locate"></text>中国 </view>
			<image
			  mode="widthFix"
			  src="http://static.botue.com/erabbit/static/uploads/brand_logo_6.jpg"
			></image>
			<view class="name">小米优购</view>
			<view class="alt">小米优购闪购嗨购</view>
		  </view>
		  <view class="card goods">
			<image
			  mode="widthFix"
			  src="http://static.botue.com/erabbit/static/uploads/goods_big_6.jpg"
			></image>
			<view class="name"
			  >彩色鹅卵石小清新防水防烫长方形餐桌圆桌布艺茶几垫电视柜盖布
			  鹅软石桌布yg056</view
			>
			<view class="price">¥899</view>
		  </view>
		</view>
		<view class="column">
		  <view class="card topic">
			<image
			  mode="widthFix"
			  src="http://static.botue.com/erabbit/static/uploads/topic_2.jpg"
			></image>
			<view class="name">忙里忙外，回家吃饭</view>
			<view class="price">19.9元<text>起</text></view>
			<view class="extra">
			  <text class="icon-heart">1220</text>
			  <text class="icon-preview">1000</text>
			</view>
		  </view>
		  <view class="card brand">
			<view class="locate"> <text class="icon-locate"></text>中国 </view>
			<image
			  mode="widthFix"
			  src="http://static.botue.com/erabbit/static/uploads/brand_logo_5.jpg"
			></image>
			<view class="name">小米优购</view>
			<view class="alt">小米优购闪购嗨购</view>
		  </view>
		  <view class="card goods">
			<image
			  mode="widthFix"
			  src="http://static.botue.com/erabbit/static/uploads/goods_big_5.jpg"
			></image>
			<view class="name"
			  >彩色鹅卵石小清新防水防烫长方形餐桌圆桌布艺茶几垫电视柜盖布
			  鹅软石桌布yg056</view
			>
			<view class="price">¥899</view>
		  </view>
		  <view class="card brand">
			<view class="locate"> <text class="icon-locate"></text>中国 </view>
			<image
			  mode="widthFix"
			  src="http://static.botue.com/erabbit/static/uploads/brand_logo_7.jpg"
			></image>
			<view class="name">小米优购</view>
			<view class="alt">小米优购闪购嗨购</view>
		  </view>
		  <view class="card goods">
			<image
			  mode="widthFix"
			  src="http://static.botue.com/erabbit/static/uploads/goods_big_3.jpg"
			></image>
			<view class="name"
			  >彩色鹅卵石小清新防水防烫长方形餐桌圆桌布艺茶几垫电视柜盖布
			  鹅软石桌布yg056</view
			>
			<view class="price">¥899</view>
		  </view>
		</view>
	  </template>
	  <template v-if="tabIndex === 2">
		<view class="column">
		  <view class="card goods">
			<image
			  mode="widthFix"
			  src="http://static.botue.com/erabbit/static/uploads/goods_big_6.jpg"
			></image>
			<view class="name"
			  >彩色鹅卵石小清新防水防烫长方形餐桌圆桌布艺茶几垫电视柜盖布
			  鹅软石桌布yg056</view
			>
			<view class="price">¥899</view>
		  </view>
		  <view class="card brand">
			<view class="locate"> <text class="icon-locate"></text>中国 </view>
			<image
			  mode="widthFix"
			  src="http://static.botue.com/erabbit/static/uploads/brand_logo_8.jpg"
			></image>
			<view class="name">小米优购</view>
			<view class="alt">小米优购闪购嗨购</view>
		  </view>
		  <view class="card topic">
			<image
			  mode="widthFix"
			  src="http://static.botue.com/erabbit/static/uploads/topic_1.jpg"
			></image>
			<view class="name">忙里忙外，回家吃饭</view>
			<view class="price">19.9元<text>起</text></view>
			<view class="extra">
			  <text class="icon-heart">1220</text>
			  <text class="icon-preview">1000</text>
			</view>
		  </view>
		  <view class="card brand">
			<view class="locate"> <text class="icon-locate"></text>中国 </view>
			<image
			  mode="widthFix"
			  src="http://static.botue.com/erabbit/static/uploads/brand_logo_6.jpg"
			></image>
			<view class="name">小米优购</view>
			<view class="alt">小米优购闪购嗨购</view>
		  </view>
		  <view class="card goods">
			<image
			  mode="widthFix"
			  src="http://static.botue.com/erabbit/static/uploads/goods_big_7.jpg"
			></image>
			<view class="name"
			  >彩色鹅卵石小清新防水防烫长方形餐桌圆桌布艺茶几垫电视柜盖布
			  鹅软石桌布yg056</view
			>
			<view class="price">¥899</view>
		  </view>
		</view>
		<view class="column">
		  <view class="card brand">
			<view class="locate"> <text class="icon-locate"></text>中国 </view>
			<image
			  mode="widthFix"
			  src="http://static.botue.com/erabbit/static/uploads/brand_logo_7.jpg"
			></image>
			<view class="name">小米优购</view>
			<view class="alt">小米优购闪购嗨购</view>
		  </view>
		  <view class="card topic">
			<image
			  mode="widthFix"
			  src="http://static.botue.com/erabbit/static/uploads/topic_2.jpg"
			></image>
			<view class="name">忙里忙外，回家吃饭</view>
			<view class="price">19.9元<text>起</text></view>
			<view class="extra">
			  <text class="icon-heart">1220</text>
			  <text class="icon-preview">1000</text>
			</view>
		  </view>
		  <view class="card goods">
			<image
			  mode="widthFix"
			  src="http://static.botue.com/erabbit/static/uploads/goods_big_5.jpg"
			></image>
			<view class="name"
			  >彩色鹅卵石小清新防水防烫长方形餐桌圆桌布艺茶几垫电视柜盖布
			  鹅软石桌布yg056</view
			>
			<view class="price">¥899</view>
		  </view>
		  <view class="card brand">
			<view class="locate"> <text class="icon-locate"></text>中国 </view>
			<image
			  mode="widthFix"
			  src="http://static.botue.com/erabbit/static/uploads/brand_logo_5.jpg"
			></image>
			<view class="name">小米优购</view>
			<view class="alt">小米优购闪购嗨购</view>
		  </view>
		  <view class="card goods">
			<image
			  mode="widthFix"
			  src="http://static.botue.com/erabbit/static/uploads/goods_big_3.jpg"
			></image>
			<view class="name"
			  >彩色鹅卵石小清新防水防烫长方形餐桌圆桌布艺茶几垫电视柜盖布
			  鹅软石桌布yg056</view
			>
			<view class="price">¥899</view>
		  </view>
		</view>
	  </template>
	</view>
  </template>
  
  <script>
  export default {
	props: ["tabIndex"],
  };
  </script>
  <style lang="scss">
  /* 瀑布流布局 */
  .masonry {
	display: flex;
	justify-content: space-between;
	padding: 20rpx 0;
	.column {
	  width: 345rpx;
	  .card {
		padding: 20rpx 15rpx;
		margin-bottom: 20rpx;
		border-radius: 8rpx;
		background-color: #fff;
	  }
	}
	.card {
	  .name {
		font-size: 24rpx;
		color: #333;
		margin-top: 10rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	  }
	  .price {
		line-height: 1;
		font-size: 22rpx;
		color: #cf4444;
	  }
	  .locate {
		text-align: left;
		color: #999;
		margin-bottom: 10rpx;
		font-size: 24rpx;
	  }
	}
	.topic {
	  .price {
		margin: 10rpx 0;
		text {
		  color: #999;
		}
	  }
	  .extra {
		line-height: 1;
		font-size: 22rpx;
		color: #666;
	  }
	}
	.extra {
	  text {
		margin-right: 14rpx;
		&::before {
		  margin-right: 4rpx;
		}
	  }
	}
	.icon-preview {
	  &:before {
		font-size: 25rpx;
	  }
	}
	.goods {
	  .price {
		margin-top: 10rpx;
	  }
	}
	.brand {
	  text-align: center;
	  .name {
		margin: 10rpx 0 8rpx;
	  }
	  .alt {
		line-height: 1;
		color: #666;
		font-size: 24rpx;
	  }
	}
  }
  </style>